<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模态框弹窗</title>
	<link rel="stylesheet" href="./bootstrap.min.css" />
	<script src="./jquery-1.7.2.min.js"></script>
	<style>
		/* 模态 */
		.modal-sel{
		  width: 100%;
		  height: 100%;
		  background: #ccc;
		  position: absolute;
		  top: 0px;
		  left: 0px;
		  opacity: 0.7;
		  filter: alpha(opacity=70);
		  display: none;
		}
		.window{
		  width: 300px;
		  height: 200px;
		  border: 1px solid #AAA;
		  background: #F1F1F1;
		  position: absolute;
		  left: 0px;
		  top: 0px;
		  z-index: 99;
		  border-radius: 8px;
		  display: none;
		}
		.window .title{
			width: 100%;
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #AAA;
			
		}
		.window .title p{
			text-indent: 15px;
		}
		.window .content{
		  width: 100%;
		  height: 110px;
		  border-bottom: 1px solid #AAA;
		}
		.window .content p{
		  line-height: 100px;
		  text-align: center;
		}
		.window .foot{
		  padding-left: 15px;
		  padding-top: 5px;
		  padding-right: 15px;
		}

	</style>
</head>
<body>
	
	<a href="javascript:void(0);" class="btn btn-success" id="apply">点击</a>
	
	<!-- 模态框 -->
	<div class="modal-sel"></div>
	<div class="window">
		<div class="title">
			<p>系统提示</p>
		</div>
		<div class="content">
			<p>是否XXXXXXX？</p>
		</div>
		<div class="foot">
			<button class="btn btn-success" id="confirm">确认</button>
			<button class="btn btn-default pull-right" id="cancel">取消</button>
		</div>
	</div>
	
</body>
</html>
<script>
	
	//模态框弹出的位置
	var width = $(window).width();
	var height = $(window).height();
	$(function(){
		$(".window").css({
			left: (width - $(".window").width()) / 2 + 'px',
			top: '150px'
		});
	});
	
	//点击显示模态框弹窗
	$(document).on('click','#apply',function(){
		$(".modal-sel").show();
		$(".window").show();
	});
	
	//弹窗后点击确认后ajax传值
	$(document).on('click','#confirm',function(){
		$.ajax({
            type: "POST",
            url:'',					//填写ajax要传输的url
            data:'',				//ajax传值
            dataType: "json",
            async:true,
            success: function (res) {
                alert(res['msg']);
            },
            error: function(xhr, status, e) {           
                if (e != "") alert(e);
            }
         });

		$(".modal-sel").hide();
		$(".window").hide();
	});
	
	//弹窗后点击取消模态框消失
	$(document).on('click','#cancel',function(){
		$(".modal-sel").hide();
		$(".window").hide();
	});
</script>